<template>
	<div class="back_contain_n mine-account">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index" :class="{'active': viewType == item.key}"
				@click="changeView(item)">
				<el-badge :value="item.num" class="item" v-if="item.num > 0">
					<span>{{item.name}}</span>
				</el-badge>
				<el-badge class="item" v-else>
					<span>{{item.name}}</span>
				</el-badge>
			</li>
		</div>
		<div class="mainTable" v-if="viewType!=='4'">
			<!-- 头部搜索 -->
			<div class="Search_Top_Part">
				<div class="search_list">
					<div>
						<div class="input_flex daterange">
							<el-date-picker v-model="time" :picker-options="pickerOptions" type="daterange" range-separator="-" start-placeholder="开始日期"
								end-placeholder="结束日期">
							</el-date-picker>
						</div>
						<div class="input_flex">
							<el-input clearable v-model="queryForm.orderBackCode" placeholder="退货号"></el-input>
						</div>
						<div class="input_flex">
							<el-input clearable v-model="queryForm.customer" placeholder="客户"></el-input>
						</div>

						<div class="input_flex">
							<el-select clearable v-model="queryForm.itemId" placeholder="品类">
								<el-option v-for="(item,index) in itemList" :key="index" :label="item" :value="item" />
							</el-select>
						</div>
						<div class="input_flex">
							<el-select clearable v-model="queryForm.gradeValue" placeholder="规格">
								<el-option v-for="(item,index) in gradeList" :key="index" :label="item" :value="item" />
							</el-select>
						</div>

						<div class="input_flex">
							<el-input clearable v-model="queryForm.orderNum" placeholder="订单号"></el-input>
						</div>

						<div class="input_flex">
							<el-input clearable v-model="queryForm.handleUser" placeholder="受理人"></el-input>
						</div>

					</div>
				</div>
				<div class="search_bt">
					<span class="zll-search" @click="getList">搜索</span>
					<span class="zll-search-reset" @click="searchReset()">重置</span>
				</div>
			</div>
			<div class="Search_Top_Input">
				<div class="addNew" v-if="viewType == '0'">
					<span class="goBack" @click="edit({},'add')" v-if="hasRole('return:order:accept') ">退货受理</span>
				</div>
			</div>
			<!-- table -->
			<sys-table class="m_table" ref="systable" :isMultipleSelection="false" :tableData="tableData"
				:tableLoading="tableLoading" :tableHeader="tableHeader" :scopeWidth="120" :backCount="backCount"
				@getBackData="getList">
				<template slot-scope="scope" slot="operate">
					<el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>
					<el-button v-if="viewType == '0'&& hasRole('return:order:dis')" type="text" size="small"
						@click="disOrderBack(scope.row)">取消</el-button>
					<el-button @click="edit(scope.row,'deal')"
						v-if="scope.row.orderBackStatus == '1' && hasRole('return:order:acceptNow')" type="text"
						size="small">处理</el-button>
					<el-button @click="edit(scope.row,'sure')"
						v-if="scope.row.orderBackStatus == '3'&& hasRole('return:order:acceptNow')" type="text"
						size="small">受理</el-button>
				</template>
			</sys-table>
			<div class="zll-dialog">
				<popout :title="'退货 · ' + (type == 'add'?'受理':(type =='see'?'查看':'处理'))" :visible.sync="addDialog"
					v-if="addDialog" class="largeSize">
					<add ref="add" slot="content" :type="type" :editData="editData" @refreshPage="refreshPage"></add>
					<template slot="bottom">
						<p class="zll-botton Info" @click="addDialog = false">关 闭</p>
						<p class="zll-botton" v-if="type == 'add'" @click="()=>{this.$refs.add.submitForm('addForm')}">
							发起退货</p>
						<p class="zll-botton" v-else-if="type == 'deal'"
							@click="()=>{this.$refs.add.submitForm('addForm')}">
							应退确认</p>
						<p class="zll-botton" v-else-if="type == 'sure'"
							@click="()=>{this.$refs.add.submitForm('addForm')}">
							完成</p>
					</template>
				</popout>
			</div>
		</div>
		<div class="mainTable zll-table" v-else>
			<el-table v-loading="tableLoading2" :data="tableData2" style="width: 100%" border >
				<el-table-column label="年份" prop="year" align="center"></el-table-column>
				<el-table-column label="订单总数" prop="count" align="center"></el-table-column>
				<el-table-column label="退货订单数" prop="thdds" align="center"></el-table-column>
				<el-table-column label="退货率" prop="bfb" align="center"></el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import Add from './add.vue'
	import { formatDate } from "@/plugins/formatDate";
	import { getStore } from "@/plugins/localStore";

	export default {
		data() {
			return {
				viewType: '0',
				paramList: [
					{ name: "受理中", key: '0', tableType: '1', num: 0 },
					{ name: "处理中", key: '1', tableType: '2' },
					{ name: "已完成", key: '2', tableType: '3' },
					{ name: "已取消", key: '3', tableType: '4' },
					{ name: "数据分析", key: '4', tableType: '5' },
				],

				tableLoading: true, //table刷新
				type: '',
				editData: {},

				queryForm: {
					orderBackCode: '',
					handleUser: '',
					customer: '',
					orderNum: '',
					itemId: '',
					gradeValue: '',
				},
				backCount: 0,
				tableData: [],
				tableHeader: [],
				addDialog: false,
				time: [],

				itemList: ['单支连排', '多支', '伸缩', 'U型'],
				gradeList: [],
				tableData2: [],
				tableLoading2: false,
				pickerOptions: {
					onPick: ({ minDate }) => {
						this.minDate = minDate
					},
					disabledDate: (time) => {
						if (this.minDate) {
							const oneYear = 365 * 24 * 60 * 60 * 1000
							return time.getTime() < this.minDate.getTime() ||
								time.getTime() > this.minDate.getTime() + oneYear
						}
						return false
					}
				}
			};
		},
		methods: {

			disOrderBack(row) {
				let self = this;
				self.$confirm('是否确认取消退单？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http({
						url: '/jinl/orderBack/disOrderBackInfo',
						method: "post",
						params: { id: row.id, disOrderUser: getStore().userName }
					}).then(resp => {
						if (resp.success) {
							self.getList();
							self.$message.success('取消成功！');
							return
						}
						self.$message.error(resp.message);
					});
				});
			},

			getOrderGrades() {
				let self = this;
				self.gradeList = [];
				self.$http({
					url: "/jinl/order/getOrderGrades",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						self.gradeList = resp.result;
					}
				});
			},

			changeView(val) {
				this.viewType = val.key;
				if (val.key == '4') {
					this.getList2()
				} else {
					this.getList()
				}

			},


			edit(val, type) {
				let self = this;
				self.addDialog = true;
				self.type = type;
				self.$nextTick(() => {
					self.editData = Object.assign({}, val);
				});
			},

			displayOderOutInfo(row) {
				let self = this;
				self.$confirm('是否确认取消该任务？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http({
						url: '/jinl/orderOut/disOrderOutInfo',
						method: "post",
						params: { id: row.id, disUserName: getStore().userName }
					}).then(resp => {
						if (resp.success) {
							self.getList();
							self.$message.success('取消成功！');
							return
						}
						self.$message.error(resp.message);
					});
				});
			},
			refreshPage() {
				this.addDialog = false;
				this.getList();
			},

			getList(startIndex, pageRow) {
				let self = this;
				self.tableLoading = true;
				if (this.time && this.time.length == 2) {
					//date类型
					self.queryForm.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd')
					self.queryForm.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
				} else {
					self.queryForm.startTime = ''
					self.queryForm.endTime = ''
				}
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0 || startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				let statusList = [];
				if (self.viewType == 0) {
					statusList = ['0', '1', '2'];
				} else if (self.viewType == 1) {
					statusList = ['3'];
				} else if (self.viewType == 2) {
					statusList = ['4'];
				} else if (self.viewType == 3) {
					statusList = ['5'];
				}
				param.statusList = statusList;
				self.$http({
					url: "/jinl/orderBack/getOrderBackInfoList",
					method: "post",
					data: JSON.stringify(param),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result;
						self.tableHeader = [
							{ "columnValue": "orderBackCode", "columnName": "退货号" },
							{ "columnValue": "customer", "columnName": "客户" },
							{ "columnValue": "orderNum", "columnName": "订单号" },
							{ "columnValue": "itemTypeId", "columnName": "品类" },
							{ "columnValue": "productName", "columnName": "品名" },
							{ "columnValue": "gradeValue", "columnName": "规格" },
							{ "columnValue": "handleTime", "columnName": "受理日期" },
							{ "columnValue": "handleUser", "columnName": "受理人" },
							{ "columnValue": "wuliuCount", "columnName": "物流到货" },
							{ "columnValue": "orderBackStatusCn", "columnName": "状态" },
						];
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
						if (self.viewType == '0') {
							self.paramList[0].num = self.backCount;
						}
					}
				});

			},
			getList2(startIndex, pageRow) {
				let self = this;
				self.tableLoading2 = true;
				self.$http({
					url: "/jinl/orderBack/getDataAnalysisList",
					method: "post",
					params: {}
				}).then(resp => {
					if (resp.success) {
						self.tableLoading2 = false;
						self.tableData2 = resp.result;

					}
				});

			},


			searchReset() { //重置搜索
				this.queryForm = {
					orderBackCode: '',
					handleUser: '',
					customer: '',
					orderNum: '',
					itemId: '',
					gradeValue: '',
				};
				this.time = [];
				this.getList();
			},
		},
		mounted() {
			let self = this;
			self.getOrderGrades();
			self.getList();//显示table
			self.$eventBus.$on("updateOrderBack", function () {
				self.addDialog = false;
				self.getList()
			})
		},
		watch: {//监听viewType切换
			viewType(val) {
				this.getList(val)
			}
		},
		components: { Add }
	};
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.mine-account {
		.leftList {
			display: flex;
			margin-bottom: 15px;

			li {
				list-style: none;
				width: 100px;
				height: 30px;
				line-height: 28px;
				border-bottom: 1px solid #fff;
				color: #333;
				text-align: center;
				cursor: pointer;
				margin-bottom: 10px;
				transition: all .5s;
				position: relative;
				display: flex;
				justify-content: center;

				&.active {
					color: #ff9935;
					border-color: #ff9935;
					position: relative;
					font-weight: 600;
					font-size: 14px;
				}

				.nums {
					position: absolute;
					right: 5px;
					top: 0;
					background: #f44336;
					color: #fff;
					height: 16px;
					line-height: 16px;
					font-weight: 400;
					border-radius: 8px;
					font-size: 12px;
					padding: 0 5px;
				}
			}
		}
	}
	.zll-table {
        .el-table th {
            font-size: 12px;
        }
        .el-table__cell {
            .el-tag {
                width: 60px;
                height: 26px;
                line-height: 26px;
                padding: 0;
                &.cancel_tag {
                    background: #fff;
                    border-color: #eee;
                    color: #ccc;
                }
            }   
        }
        &.inspect-box_table {
            .el-table .cell {
                span {
                    &.ws {
                        margin: 0 1px;
                        color: #4caf50;
                    }
                    &.abnormal1 {
                        color: #fb2516;
                    }
                    &.abnormal2 {
                        color: #fb2516;
                    }
                }
            }
        }
    }
</style>